<!-- 库标签 -->
<template>
	<div class="library_tag_wrapper">
		<div class="library_tag_type">
			<el-input class="input" size="small" placeholder="请输入库标签名称" clearable v-model="filterText"></el-input>
			<div class="handle">
				<el-button size="mini" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新建</el-button>
				<span>共有 {{ libraryTotal }} 个库标签</span>
			</div>
			<template v-if="libraryTypeData.length > 0">
				<el-radio-group v-model="activeName">
					<el-radio v-for="(item, index) in libraryTypeData" :key="index" :label="item.id">
						<h4>{{ item.name }}({{ item.dirCount }})</h4>
						<template v-if="item.id !== '-1'">
							<el-button size="medium" type="text" @click.stop="handleOpenDialog(item.id)">修改</el-button>
							<el-button size="medium" type="text" @click.stop="handleDeleteLibrary(item, index)">删除</el-button>
						</template>
					</el-radio>
				</el-radio-group>
			</template>
			<template v-else>
				<el-empty description="暂无资源库类型"></el-empty>
			</template>
		</div>
		<sw-common-frame class="library_tag_table" :loading="loading">
			<template slot="table">
				<el-table size="medium" :data="tableData" stripe height="100%">
					<el-table-column prop="name" label="库名称"></el-table-column>
					<el-table-column prop="createName" label="拥有者"></el-table-column>
					<el-table-column label="操作" width="80" v-if="activeName !== '-1'">
						<template slot-scope="{ row }">
							<el-button size="medium" type="text" @click="handleRemoveLibrary(row.id)">移除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<template slot="page">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
			</template>
		</sw-common-frame>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="getLibrayTypeData()"></form-dialog>
	</div>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { getLibraryList, updateLibrary } from '@/api/data/tbNetDiskDir';
import { getLibraryTypeList, deleteLibraryType } from '@/api/platform/tbNetLibrary';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '库类型',
			//资源库类型
			filterText: '',
			activeName: '-1',
			libraryTypeList: [],
			//表单
			libTypeDialog: false,
			formData: {}
		};
	},
	computed: {
		listFunction() {
			return eval(getLibraryList);
		},
		requestParams() {
			let params = { ...this.queryData };
			params['isAll'] = 1;
			params['type'] = '1';
			params['libraryId'] = this.activeName;
			return params;
		},
		libraryTotal() {
			let arr = this.libraryTypeList;
			return lodash.sumBy(arr, 'count');
		},
		libraryTypeData() {
			let datas = lodash.cloneDeep(this.libraryTypeList);
			return datas.filter((item) => item.name.indexOf(this.filterText) !== -1);
		}
	},
	watch: {
		activeName: {
			handler() {
				this.queryData.page = 1;
				this.queryTableData();
			},
			immediate: true
		}
	},
	mounted() {
		this.getLibrayTypeData();
	},
	methods: {
		//获取资源库类型列表
		async getLibrayTypeData() {
			let result = await getLibraryTypeList().then((res) => res.data);
			if (result.code === '0') {
				let datas = result.data || [];
				this.libraryTypeList = datas.map((n) => {
					return { ...n, count: Number(n.dirCount) };
				});
			}
		},

		//删除资源库类型
		handleDeleteLibrary(data, index) {
			let that = this;
			that.$confirm(`此操作将删除资源库类型<font color="#f00">【${data.name}】</font>, 是否继续?`, '删除提示', {
				type: 'warning',
				dangerouslyUseHTMLString: true,
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteLibTypeRequest(data.id, index);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除资源库类型请求
		async deleteLibTypeRequest(id, index) {
			let result = await deleteLibraryType(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除资源库类型成功');
				this.libraryTypeList.splice(index, 1);
				this.filterText = '';
			}
		},

		//移除资源库
		async handleRemoveLibrary(id) {
			let params = { id, libraryList: [{ relId: this.activeName, operType: 2 }] };
			let result = await updateLibrary(params).then((res) => res.data);
			if (result.code === '0') {
				this.queryTableData();
				this.getLibrayTypeData();
				this.$message.success('移除资源库成功');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_tag_wrapper {
	flex: 1;
	display: flex;
	overflow: hidden;
}
.library_tag_type::v-deep {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 36%;
	min-width: 240px;
	padding: 16px;
	box-sizing: border-box;
	border-right: solid 1px #e4e7ed;
	.handle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		margin-top: 10px;
	}
	.el-radio-group {
		flex: 1;
		overflow: auto;
		margin-top: 10px;
	}
	.el-radio {
		display: block;
		margin: 0;
		padding: 0 10px;
		border-radius: 4px;
		&.is-checked {
			background-color: var(--primary-background-disabled);
		}
		h4 {
			flex: 1;
			font-weight: normal;
		}
	}
	.el-radio__input {
		display: none;
	}
	.el-radio__label {
		display: flex;
		align-items: center;
		padding: 0;
		height: 36px;
		color: #303133;
	}
}
.library_tag_table {
	flex: 1;
	overflow: hidden;
}
</style>
